<!--
 * @Author: YTian
 * @Date: 2023-05-15 13:35:05
 * @LastEditTime: 2023-05-18 19:07:07
 * @Description: 详情页面
 * @FilePath: \pcsong\src\components\details.vue
-->
<script setup>
// ========= 导入全局api ========= //
import { Song__datas__links_push } from '@/global/data.ts'

// ========= 导入音乐表格组件 ========= //
import Table from '@/components/Table.vue'

// ========= 导入按钮组件 ========= //
import { NButton } from 'naive-ui'

const props = defineProps({
	introduce: {
		type: Object,
		required: true
	},
	song__list: {
		type: Array,
		required: true
	}
})
</script>

<template>
	<div class="playlist">
		<div class="playlist__introduce">
			<div class="playlist__introduce__cover">
				<img :src="introduce.cover" alt="" />
			</div>

			<div class="playlist__introduce_temp">
				<div class="playlist__introduce__name">
					{{ introduce.name }}
				</div>

				<div class="playlist__introduce__description">
					{{ introduce.description }}
				</div>

				<div class="playlist__introduce__button">
					<n-button
						@click.stop="Song__datas__links_push(song__list)"
						:round="true"
						type="success"
					>
						全部播放
					</n-button>
				</div>
			</div>
		</div>

		<div class="playlist__table">
			<Table :song__list="song__list" />
		</div>
	</div>
</template>

<style scoped>
.playlist {
	--h: 160px;
	height: 100%;

	display: grid;
	grid-row-gap: 50px;
	grid-template-rows: var(--h) 1fr;
}

.playlist__table {
	width: 100%;
	overflow: auto;
}

.playlist__introduce {
	height: var(--h);
	display: grid;
	grid-template-columns: var(--h) 1fr;
	grid-column-gap: 2rem;

	padding: 14px;
}

.playlist__introduce__cover img {
	width: var(--h);
	height: var(--h);

	border-radius: 50vmin;
	box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);
}

.playlist__introduce_temp {
	display: grid;

	grid-template-rows: 32px 1fr 40px;

	grid-row-gap: 16px;
}

.playlist__introduce__name {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 39px;

	color: #000000;
}

.playlist__introduce__description {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 几行 */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.n-button {
	padding: 8px 34px;
}
</style>
